import React, { useRef } from 'react';
import * as echarts from 'echarts';
import { useEcharts } from '@/hooks/useEcharts';
import useStores from '@/hooks/useStores';

const chartData = [
    { name: '1', value: 300 },
    { name: '2', value: 400 },
    { name: '3', value: 452 },
    { name: '4', value: 770 },
    { name: '5', value: 650 },
    { name: '6', value: 256 },
    { name: '7', value: 350 },
    { name: '8', value: 422 },
    { name: '9', value: 235 },
    { name: '10', value: 658 },
    { name: '11', value: 600 },
    { name: '12', value: 400 },
    { name: '13', value: 523 },
    { name: '14', value: 482 },
    { name: '15', value: 423 },
]

const xData = chartData.map(v => v.name)
const sData = chartData.map(v => v.value)

const option = {
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '0%',
        top: '0%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
        axisTick: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151,151,151,0.5)',
                type: 'dashed',
            },
        },
        axisLabel: {
            margin: 10,
            color: '#666',
            fontSize: 14,
        },

    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(151,151,151,0.5)',
                type: 'dashed',
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(151,151,151,0.5)',
                type: 'dashed',
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
    },
    series: [{
        type: 'bar',
        barWidth: '20px',
        data: sData,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00BD89', // 0% 处的颜色
            }, {
                offset: 1,
                color: '#C9F9E1', // 100% 处的颜色
            }], false),
        },
    }],
}

const Chart2: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);
    const { themes } = useStores();
    useEcharts(chartRef, { option, style: { width: '100%', height: '300px' }, theme: themes.type });
    return (
        <div ref={chartRef} style={{ width: '100%', height: '300px' }}></div>
    )
}

export default Chart2;